<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      :append-to-body="true"
      :title="title"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
      @closed="closeDialog"
    >
      <p slot="title">{{ title }}</p>
      <el-form
        ref="formData"
        :model="formData"
        :rules="formDataRules"
        label-width="120px"
        status-icon
      >
        <el-row>
          <el-col :span="10">
            <el-form-item label="请选择库区库位" prop="storageAreaId">
              <el-select
                v-model="formData.storageAreaId"
                filterable
                placeholder="库区"
                @change="selectStorageArea($event)"
              >
                <el-option
                  v-for="item in storageAreaOptions"
                  :key="item.value"
                  :label="item.areaName"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="margin-left: -100px">
            <el-form-item prop="storageSpaceId">
              <el-select
                v-model="formData.storageSpaceId"
                filterable
                placeholder="库位"
              >
                <el-option
                  v-for="item in storageSpaceOptions"
                  :key="item.value"
                  :label="item.number"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit('formData')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStorageAreaList,
  getStorageSpaceList,
} from "../../../../api/Storage/StorageOrderIn.js";
export default {
  name: "DialogStorageArea",
  components: {
  },
  props: {
    dialogStorageAreaVisible: {
      type: Boolean,
      default: false,
    },
    storageId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      title: '批量设置库区库位',
      loading: false,
      innerDialogFormVisible: false,
      storageAreaOptions: [],
      storageSpaceOptions: [],
      formData: {
        storageAreaId: null,
        storageSpaceId: null,
      },
      formDataRules: {
        storageAreaId: [
          {
            required: true,
            trigger: "blur",
            message: '请选择库区',
          },
        ],
        storageSpaceId: [
          {
            required: true,
            trigger: "blur",
            message: '请选择库位',
          },
        ]
      }
    };
  },
  watch: {
  },
  created() {
    this.innerDialogFormVisible = this.dialogStorageAreaVisible;
    this.init();
  },
  methods: {
    async init() {
      this.getStorageAreaList();
    },
    cancel() {
      this.innerDialogFormVisible = false;
      this.$emit("update:dialogStorageAreaVisible", false);
    },
    closeDialog() {
      this.cancel();
    },
    // 获取库区下拉框
    getStorageAreaList() {
      getStorageAreaList({
        storageId: this.storageId,
        status: 1,
        pageIndex: 1,
        pageSize: 50000,
      }).then((res) => {
        if (res.data.dataList?.length > 0) {
          this.storageAreaOptions = res.data.dataList.map((item) => {
            return {
              ...item,
              value: item.id,
            };
          });
        } else {
          this.storageAreaOptions = [];
        }
      });
    },
    // 选择库位下拉框
    selectStorageArea(val) {
      this.getStorageSpaceList(val.value);
    },
    getStorageSpaceList(storageAreaId) {
      getStorageSpaceList({
        storageId: this.storageId,
        storageAreaId: storageAreaId,
        status: 1,
        pageIndex: 1,
        pageSize: 50000,
      }).then((res) => {
        if (res.data.dataList?.length > 0) {
          this.storageSpaceOptions = res.data.dataList.map((item) => {
            return {
              ...item,
              value: item.id,
            };
          });
        } else {
          this.storageSpaceOptions = [];
        }
      });
    },
    onSubmit() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.$emit('batchSetStorageArea', {
            storageAreaId: this.formData.storageAreaId,
            storageSpaceId: this.formData.storageSpaceId,
            storageSpaceOptions: this.storageSpaceOptions
          });
          this.closeDialog();
        }
      })
    }
  },
};
</script>
<style lang="scss"></style>

